import styles from "@styles/updateChannel.module.less";
import React from "react";
import { useRequestAllChannelsQuery } from "@service/channelEndpoints";
import { useTypedSelector } from "@store/index";
import { guestChannelSelectors } from "@slice/guestChannel";
import Item from "@pages/home/widgets/updateGuestChannel/unSelected/Item";

export default function UnSelected() {
  // 获取所有频道列表
  const { data: allChannels, isSuccess: isAllChannelSuccess } =
    useRequestAllChannelsQuery(undefined);
  // 获取访客频道列表
  const guestChannels = useTypedSelector(guestChannelSelectors.selectAll);
  // 如果所有频道列表没有获取成功 阻止程序继续运行
  if (!isAllChannelSuccess) return null;
  // 从所有频道列表中排除访客已经渲染的频道列表得到访客可以选择的频道列表
  const canSelectedChannels = allChannels.data.channels.filter(
    (ac) => typeof guestChannels.find((gc) => gc.id === ac.id) === "undefined"
  );

  // 渲染访客可以选择的频道列表
  return (
    <>
      <div className={styles.title}>
        <h3>可选频道</h3>
      </div>
      <div className={styles.list}>
        {canSelectedChannels.map((channel) => (
          <Item key={channel.id} channel={channel} />
        ))}
      </div>
    </>
  );
}
